<template>
  <div class="channel">
    <!-- 我的频道 -->
    <div class="myChannel">
      <div class="head">
        <span class="name">我的频道</span>
        <van-button
          type="danger"
          plain
          size="mini"
          @click="showCross = !showCross"
          >{{ showCross ? "取消" : "编辑" }}</van-button
        >
      </div>
      <van-grid>
        <van-grid-item
          @click="changeIndex(index)"
          v-for="(item, index) in channelList"
          :key="index"
        >
          <template #text>
            <span :class="{ active: value === index }">{{ item.name }}</span>
            <van-icon
              @click.stop="delChannel(index, item.id)"
              v-if="showCross && index"
              class="mycross"
              name="cross"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道 -->
    <div class="myChannel">
      <div class="head">
        <span class="name">可选频道</span>
      </div>
      <van-grid>
        <van-grid-item
          @click="addChannel(item)"
          v-for="(item, index) in selectChannels"
          :key="index"
          :text="item.name"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannelApi, addChannelApi, delChannelApi } from "@/api";
import { setChannel } from '@/utils/auth.js'
export default {
  // channelList：接收频道数据
  props: ["channelList", "value"],
  data() {
    return {
      // 所有频道
      allChannels: [],
      showCross: false,
    };
  },
  computed: {
    // 利用计算属性得到可选频道
    selectChannels() {
      // 得到我的频道中每个元素的 id
      const idArr = this.channelList.map((item) => {
        return item.id;
      });
      // idArr: [0,1,2,4,6,7,8,9,10,11,12]
      // 筛选出所有频道中不包括我的频道的数据
      return this.allChannels.filter((item) => {
        // 剔除掉我的频道中存在的元素
        return !idArr.includes(item.id);
      });
    },
  },
  methods: {
    async delChannel(index, id) {
      // 删除选中的我的频道
      this.channelList.splice(index, 1);
      // 判断下标
      if (this.value > index) {
        this.$emit("input", this.value - 1);
      }
      // 保存操作后的频道数据
      // 得到用户的 token
      const token = this.$store.state.token.token;
      // 判断用户是否登录
      if (token) {
        // 将删除后的频道数据提交到服务器
        await delChannelApi(id);
      } else {
        // 将操作后的频道数据保存到本地
        setChannel(this.channelList);
      }
      // 提示成功
      this.$toast.success("删除频道成功");
    },
    // 添加我的频道
    async addChannel(item) {
      // 直接将 item 添加到我的频道中
      this.channelList.push(item);
      //数据的持久化
      const token = this.$store.state.token.token;
      // 判断用户是否登录
      if (token) {
        // 已登录：请求服务器
        await addChannelApi({
          channels: [
            {
              id: item.id,
              seq: this.channelList.length + 1,
            },
          ],
        });
        // 提示新增频道成功
        this.$toast.success("新增频道成功");
      } else {
        // 未登录：保存本地
        // 将我的频道保存到本地
        setChannel(this.channelList);
        this.$toast.success("新增频道成功");
      }
    },
    // 切换选中的频道
    changeIndex(index) {
      // 不能在子组件中直接修改 value，
      //   因为它是父组件传入的，强行修改会报错：单向数据流
      // 直接传回给父组件
      this.$emit("input", index);
    },
  },
  // 打开页面时得到所有的频道
  async created() {
    const res = await getAllChannelApi();
    // 保存所有的频道数据
    this.allChannels = res.data.data.channels;
  },
};
</script>

<style lang="less">
.channel {
  font-size: 12px;
  .myChannel {
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px;
    }
    .active {
      color: red;
    }
    .mycross {
      position: absolute;
      top: 5px;
      right: 5px;
    }
  }
}
</style>